// 基础Api
import { createBrowserRouter, Link, Navigate } from 'react-router-dom'; // createHashRouter
import App from './App.tsx';
import './index.css';

const Demo = () => {
  return <div>路由组件Demo(基础Api)</div>;
};

const Vite = () => {
  // ..表示回到上级目录
  return (
    <div>
      Vite <Link to='..'>Back</Link>
    </div>
  );
};

const Test = () => {
  return (
    <div>
      这是test组件 <Navigate to='/demo' />
    </div>
  );
};

const ErrorPage = () => {
  return (
    <div>
      404 Not Found
      <Link to='/'>Back</Link>
    </div>
  );
};

// createHashRouter
const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />
  },
  {
    path: '/test',
    element: <Test />
  },
  {
    path: '/demo',
    element: <Demo />
  },
  {
    path: '/vite',
    element: <Vite />
  }
]);

export default router;
